<template>
	<view class="personal-attest">
		<!-- 实名认证 -->
		<view class="top">
			<view class="top-item">
				<view class="top-title">
					<image src="/static/imgs/myStore/btn_01.png" mode=""></image>
					<text @click="cardBinding = !cardBinding">实名认证</text>
				</view>
				<view class="top-conter">
					<view class="top-conter1">
						<text>绑定银行卡</text>
						<view>
							<text @click="navTo('/pages/set/bankCardManagement')">去绑定 <text class="iconfont">&#xe600;</text></text>
						</view>
					</view>
					<view class="top-conter2" :class="isName ? '' : 'err-input'">
						<text>真实姓名</text>
						<input v-model="name" maxlength="5" @blur="verificationUsernme" placeholder="请输入姓名" placeholder-style="font-size: 24upx;color: #999" />
					</view>
					<view class="top-conter2" :class="isIDcard ? '' : 'err-input'">
						<text>身份证号</text>
						<input @blur="verificationIDcard" v-model="IDcard" maxlength="18" placeholder="请输入身份证号" placeholder-style="font-size: 24upx;color: #999" />
					</view>
				</view>
			</view>
		</view>

		<!-- 身份证照 -->
		<view class="conter">
			<view class="conter-item">
				<view class="conter-title">
					<image src="/static/imgs/myStore/btn_02.png" mode=""></image>
					<text>身份证照</text>
				</view>
			</view>
			<view class="conter-box">
				<view class="img1">
					<view class="do" v-if="!imgListsL.length" @click="chooseImg(0)">
						<text class="iconfont oo">&#xe6a7;</text>
						<view class="text">
							身份证正面
						</view>
					</view>


					<view class="singleImg" v-for="(img, sub) in imgListsL" :key="sub" v-else>
						<image :src="img" :lazy-load="true" mode="aspectFill" @click="previewImg(0)"></image>
						<view class="remove" @click="removeImg(sub, 0)">
							<text class="iconfont remove-img">&#xe628;</text>
						</view>
					</view>

				</view>
				<view class="img1">
					<!-- @click="" -->
					<view class="do" v-if="!imgListsR.length" @click="chooseImg(1)">
						<text class="iconfont oo">&#xe6a7;</text>
						<view class="text">
							身份证反面
						</view>
					</view>

					<view class="do singleImg" v-for="(img, index) in imgListsR" :key="index" v-else>
						<image :src="img" :lazy-load="true" mode="aspectFill" @click="previewImg(1)"></image>
						<view class="remove" @click="removeImg(index, 1)">
							<text class="iconfont remove-img">&#xe628;</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 店铺认证 -->
		<view class="shop">
			<view class="shop-item">
				<view class="shop-title">
					<image src="/static/imgs/myStore/btn_03.png" mode=""></image>
					<text>店铺认证</text>
				</view>
				<view class="shop-conter">
					<view class="shop-conter2" :class="isShopname ? '' : 'err-input'">
						<text>店铺名称</text>
						<input @blur="verificationShopname" v-model="shopName" maxlength="8" placeholder="店铺名称" placeholder-class="place" />
					</view>	
					<view class="shop-conter2">
						<text>店铺定位</text>
						<view @click="selectOption" class="right" style="font-size: 24upx; color:#999;margin-left:70upx;">
							{{position}}
						</view>
					</view>
					<view class="shop-conter2">
						<text>行业分类</text>
						<picker class="picker" mode="selector" :value="index" :range="categoryList" @change="onCategory">
							<view>{{categoryName}}</view>
						</picker>

					</view>
					<view class="shop-conter2" :class="isLegalName ? '' : 'err-input'">
						<text>法人姓名</text>
						<input @blur="verificationLegalName" v-model="legalName" maxlength="5" placeholder="请输入姓名" placeholder-class="place" />
					</view>
					<view class="shop-conter2" :class="isLegalId ? '' : 'err-input'">
						<text>法人身份证号</text>
						<input @blur="verificationLegalId" type="number" v-model="legalId" maxlength="18" placeholder="请输入身份证号" placeholder-class="place" />
					</view>
					
					<view class="shop-conter2" :class="isCompanyName ? '' : 'err-input'">
						<text>公司名称全称</text>
						<input  @blur="verificationCompanyName" v-model="companyName" maxlength="12" placeholder="请输入公司名称全称" placeholder-class="place" />
					</view>
					<view class="shop-conter2" :class="isBusinessNumber ? '' : 'err-input'">
						<text>营业执照编号</text>
						<input @blur="verificationBusinessNumber" v-model="businessNumber" maxlength="15" placeholder="请输入营业执照编号" placeholder-class="place" />
					</view>
				</view>
			</view>
		</view>

		<!-- 营业执照 -->
		<view class="conter">
			<view class="conter-item">
				<view class="conter-title">
					<image src="/static/imgs/myStore/btn_02.png" mode=""></image>
					<text>营业执照</text>
				</view>
			</view>
			<view class="ci-describe">
				根据行业分类上传相关资格认证：
			</view>
			<view class="ci-describe">
				如餐饮行业：营业执照/卫生许可证/食品流通许可证
			</view>
			<view class="conter-box">
				<view class="img1">
					<view class="do" v-if="!imgBusinessL.length" @click="chooseImg(2)">
						<text class="iconfont oo">&#xe6a7;</text>
						<view class="text">
							营业执照
						</view>
						<view class="line2">
							(必填)
						</view>
					</view>

					<view class="singleImg" v-for="(img, sub) in imgBusinessL" :key="sub" v-else>
						<image :src="img" :lazy-load="true" mode="aspectFill" @click="previewImg(2)"></image>
						<view class="remove" @click="removeImg(sub, 2)">
							<text class="iconfont remove-img">&#xe628;</text>
						</view>
					</view>
				</view>

				<view class="img1">
					<view class="do" v-if="!imgBusinessR.length" @click="chooseImg(3)">
						<text class="iconfont oo">&#xe6a7;</text>
						<view class="text">
							<text style="color: #f00;">*</text>其它
						</view>
						<view class="line2">
							(选填)
						</view>
					</view>

					<view class="singleImg" v-for="(img, sub) in imgBusinessR" :key="sub" v-else>
						<image :src="img" :lazy-load="true" mode="aspectFill" @click="previewImg(3)"></image>
						<view class="remove" @click="removeImg(sub, 3)">
							<text class="iconfont remove-img">&#xe628;</text>
						</view>
					</view>
				</view>

			</view>
		</view>


		<!-- 联系方式 -->
		<view class="bottom">
			<view class="bottom-item">
				<view class="bottom-title">
					<image src="/static/imgs/myStore/btn_05.png" mode=""></image>
					<text>联系方式</text>
				</view>
			</view>
			<view class="bottom-box">
				<view class="box-time1">
					<view>
						<input type="number" v-model="phoneText" placeholder="手机号" maxlength="11" />
					</view>
					<button :class="['button',{'button-active': buttonFlag}]" @tap="getVerCode()" :disabled="buttonFlag">{{verCodeText}}</button>
				</view>
				<view class="box-time2">
					<view>
						<input type="number" v-model="verCode" placeholder="验证码" maxlength="6" />
					</view>
					<view class="box-tips">
						<label class="radio" @click="radioChange">
							<!-- value="r1" -->
							<radio :checked="ischecked" />
							<!-- <view> -->
							<text>认证及代表并同意邻品汇</text>

							<text class="a" @click.stop="navTo('/pages/myStore/management/userPact')">用户协议</text>
							<text>和</text>
							<text class="a">隐私政策</text>
							<!-- </view> -->
						</label>
					</view>
				</view>
				<button :disabled="!ischecked" @click="onSubmit" :class="['btn',{'btn-active': ischecked}]">提交申请</button>


			</view>
		</view>

		<!-- 认证成功弹窗 -->
		<sDialog class="mode-dialog" v-model="visible" :maskClose="false">
			<view class="tipsImg" style="background-image: url(/static/imgs/myStore/attest_02.png);">
				<view class="tipsContent">
					<text>恭喜你，认证成功</text>
					<text>赶快去上架宝贝管理店铺吧！</text>
					<button type="primary" @click="switchTo('/pages/myStore/myStore')">去我的店</button>
				</view>
			</view>
			<view class="delImg">
				<view @click="hideDialog" style="background-image: url(/static/imgs/myStore/icon_del.png);"></view>
			</view>
		</sDialog>

	</view>
</template>

<script>
	import sDialog from '@/components/s-dialog/index.vue'
	
	export default {
		components: { sDialog,  },
		data() {
			return {
				position:"请定位地址~",
				name: '', // 真实姓名
				isName: true,
				IDcard: '', // 身份证号
				isIDcard: true, // 身份证号
				imgListsL: [], // 正面照片
				imgUrlL: '', // 正面上传图片后的地址
				imgListsR: [], // 反面照片
				imgUrlR: '', // 反面上传图片后的地址

				shopName: '', // 店铺名
				isShopname: true,
				lng:"",
				lat:'',

				index: 0, //
				ctId: '', // 最终要传的 行业ID
				categoryId: [], // 行业ID 列表
				categoryName: '请选择行业分类', // 界面显示分类
				categoryList: [], // 所有分类列表

				legalName: '', // 法人姓名
				isLegalName: true,
				legalId: '', // 法	人身份证号
				isLegalId: true,
				companyName: '', // 公司名称
				isCompanyName: true,
				businessNumber: '', // 营业执照编号
				isBusinessNumber: true,
				imgBusinessL: [], // 执照 照片
				urlBusinessL: '', // 执照上传图片后的地址
				imgBusinessR: [], // 其它执照 照片
				urlBusinessR: '', // 其它执照上传图片后的地址

				phoneText: '', // 手机号
				verCode: '', // 验证码
				ischecked: false, // 是否勾选
				verCodeText: '获取验证码',
				visible: false, // 弹窗是否可见
				buttonFlag: false, // 底部按钮
			}
		},
		onLoad() {
			this.getCategory();
		},
		methods: {
			verificationUsernme() {
				if (this.name.length < 1 || !/^[\u2E80-\u9FFF]+$/.test(this.name)) {
					this.isName = false
				} else {
					this.isName = true
				}
			},
			verificationIDcard() {
				let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
				if (!reg.test(this.IDcard)) {
					this.isIDcard = false
				} else {
					this.isIDcard = true
				}
			},
			verificationShopname() {
				if (this.shopName.length < 1) {
					this.isShopname = false
				} else {
					this.isShopname = true
				}
			},
			verificationLegalName() {
				if (this.legalName.length < 1 || !/^[\u2E80-\u9FFF]+$/.test(this.legalName)) {
					this.isLegalName = false
				} else {
					this.isLegalName = true
				}
			},
			verificationLegalId() {
				let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
				if (!reg.test(this.legalId)) {
					this.isLegalId = false
				} else {
					this.isLegalId = true
				}
			},
			verificationCompanyName() {
				if (this.companyName.length < 1) {
					this.isCompanyName = false
				} else {
					this.isCompanyName = true
				}
			},
			verificationBusinessNumber() {
				let reg = /^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$/
				if (!reg.test(this.businessNumber)) {
					this.isBusinessNumber = false
				} else {
					this.isBusinessNumber = true
				}
			},
			selectOption(){
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.position = res.name;
						this.lng = res.longitude
						this.lat = res.latitude
						// uni.setStorageSync('lph-address', {
						// 	name: res.name,
						// 	long: res.longitude,
						// 	lat: res.latitude
						// });
					}
				})
			},
			async onSubmit() { // 提交申请
				let aa = uni.getStorageSync('lph-user-info');
				let a = {
					realname: this.name,
					idcard: this.IdNumber,
					legal_idcard_positive: this.imgUrlL,
					legal_idcard_negative: this.imgUrlR,
					shname: this.shName,
					legal_realname: this.legalName,
					legal_idcard: this.legalId,
					comname: this.companyName,
					com_num: this.businessNumber, // 执照编号
					comimg: this.urlBusinessL, // 营业执照图片URL
					classfiy_id: this.ctId, // 行业分类
					authimg: this.urlBusinessR, // 其它图片url
					phone: this.phoneText,
					code: this.verCode,
					role_refresh_token: aa.role_refresh_token,
					lng:this.lng,
					lat:this.lat
				};
				let b = await this.$http.setEnterpriseAuthAdd(a);
				if (b.code != 200) {
					uni.showToast({
						title: b.message,
						icon: 'none'
					})
					return;
				};
				
				uni.showToast({
					title: b.message,
					icon: 'none'
				});
				let token = b.data.token;
				uni.setStorageSync('lph-token',token.role_request_token); // 更新用户token
				aa['user_type'] = b.data.user_type;
				aa['role_refresh_token'] = token.role_refresh_token;
				uni.setStorageSync('lph-user-info', aa); // 更新用户类型
				this.visible = true;
			},
			hideDialog() { // 弹窗的隐藏
				this.visible = false
			},

			chooseImg(val,field) { // 选择图片与上传
				var _self = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res1) {
						uni.showLoading({
							title: '图片上传中'
						})
						uni.uploadFile({
							url: _self.$common.baseUrl.setUploadImg,
							filePath: res1.tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync('lph-token') || ''
							},
							success: (res2) => {
								res2 = JSON.parse(res2.data)
								if (res2.code == 200) {
									uni.hideLoading();
									uni.showToast({
										title: res2.message,
										icon: 'none'
									});
									switch (val) {
										case 0:
											_self.imgListsL = res1.tempFilePaths;
											_self.imgUrlL = res2.data.file;
											break;
										case 1:
											_self.imgListsR = res1.tempFilePaths; // 为了显示
											_self.imgUrlR = res2.data.file; // 图片上传后拿到的url
											break;
										case 2:
											_self.imgBusinessL = res1.tempFilePaths; // 为了显示
											_self.urlBusinessL = res2.data.file; // 图片上传后拿到的url
											break;
										case 3:
											_self.imgBusinessR = res1.tempFilePaths; // 为了显示
											_self.urlBusinessR = res2.data.file; // 图片上传后拿到的url
											break;
										default:
											break;
									}
									return
								};
								uni.hideLoading();
								uni.showToast({
									title: res2.message,
									icon: 'none'
								})
							}
						});
					}
				})
			},
			previewImg(val) { //图片预览
				let a;
				switch (val) {
					case 0:
						a = this.imgListsL;
						break;
					case 1:
						a = this.imgListsR;
						break;
					case 2:
						a = this.imgBusinessL;
						break;
					case 3:
						a = this.imgBusinessR;
						break;
					default:
						break;
				}
				uni.previewImage({
					urls: a,
					indicator: 'number'
				});
			},
			removeImg(index, val) { // 移除图片
				switch (val) {
					case 0:
						this.imgListsL.splice(index, 1);
						break;
					case 1:
						this.imgListsR.splice(index, 1);
						break;
					case 2:
						this.imgBusinessL.splice(index, 1);
						break;
					case 3:
						this.imgBusinessR.splice(index, 1);
						break;
					default:
						break;
				}
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			switchTo(url) {
				uni.switchTab({
					url
				})
			},
			async getVerCode() { // 获取验证码
				let intervalTime = 60;
				// 判断手机号是否合法
				if (!(/^1[34578]\d{9}$/.test(this.phoneText))) {
					uni.showToast({
						title: '手机号不正确',
						icon: 'none'
					});
				} else {
					let a = await this.$http.sendSms({
						phoneNumber: this.phoneText
					});
					if (a.code == 200) {
						uni.showToast({
							title: '获取验证码成功',
							icon: 'none'
						});
						this.buttonFlag = true;
						let intervalId = setInterval(() => {
							intervalTime--;
							this.verCodeText = `(${intervalTime}s)`
							if (intervalTime <= 0) {
								clearInterval(intervalId);
								this.verCodeText = "获取验证码";
								this.buttonFlag = false;
							}
						}, 1000)
						return
					};
					uni.showToast({
						title: a.message,
						icon: 'none'
					})

				}
			},

			radioChange() { // 单选框
				if (this.ischecked == false) {
					this.ischecked = true
				} else {
					this.ischecked = false
				}
			},

			async getCategory() { // 获取行业分类 与 ID
				let a = await this.$http.getShopClassFiy();
				a.data.forEach((item) => {
					this.categoryList.push(item.catename);
					this.categoryId.push(item.classid);
				})
			},
			onCategory(e) { //选择行业分类 与 ID
				this.index = e.detail.value;
				this.categoryName = this.categoryList[e.detail.value];
				this.ctId = this.categoryId[e.detail.value];
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/myStore.scss';
	
	.err-input {
		position: relative;
		color: red !important;
		border-bottom: 1upx solid red;
		&::before {
			content: 'x';
			position: absolute;
			// color: red;
			left: -20upx;
		}
	}
</style>
